<template>
  <a-card :hoverable="true">
    <a-row>
      <a-col :span="5" v-for="item in data" :key="item.RowId">
        <div @click="goOrg(item.RowId, item.Name)" class="wait-total-num">
          {{ item.Name }}
        </div>
        <div class="wait-total-title">
          总编{{ item.ApprovedStaffing ? item.ApprovedStaffing : 0 }}人，在编{{
            item.InStaffing ? item.InStaffing : 0
          }}人，缺编{{ item.VacancyStaffing ? item.VacancyStaffing : 0 }}人
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { query } from "@/services/system/zerocode/run/list";
export default {
  props: ["id"],
  data() {
    return {
      panelId: this.id,
      data: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let that = this;
      query({
        current: 1,
        size: 15,
        sord: "",
        sidx: "id",
        filters: "",
        type: 0,
        rote: {
          menuId: "c168504d-c2f3-49a4-6eb7-cabbb52a9a0c",
        },
        configId: "686a3912-39ba-31e5-a035-18fe70d8fc8c",
        menuId: "c168504d-c2f3-49a4-6eb7-cabbb52a9a0c",
        haveDataPermission: false,
        isPaging: true,
        cols: [],
        reportName: "",
        timeStamp: this.$utils.timestamp(),
      }).then(async function (result) {
        if (result.code == that.eipResultCode.success) {
          that.data = result.data.data;
        } else {
          that.$message.error(result.msg);
        }
      });
    },
    goOrg(id, name) {
      var filters = encodeURIComponent(
        '{"field":"Classification","op":"eq","data":"' + id + '"}'
      );
      this.$router.push({
        path: "/appbuild/8ab3d3e2-edfc-d305-b9c8-a17a5a6253b4",
        query: {
          filters: filters,
          title: name,
        },
      });
    },

    /**
     * 获取cookie主域名
     * @returns
     */
    getCookieDomain() {
      var host = location.hostname;
      var ip =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if (ip.test(host) === true || host === "localhost") return host;
      var regex = /([^]*).*/;
      var match = host.match(regex);
      if (typeof match !== "undefined" && null !== match) host = match[1];
      if (typeof host !== "undefined" && null !== host) {
        var strAry = host.split(".");
        if (strAry.length > 1) {
          host = strAry[strAry.length - 2] + "." + strAry[strAry.length - 1];
        }
      }
      return "." + host;
    },
  },
};
</script>

<style scoped>
.ant-col-5 {
  width: 20%;
}

.ant-card {
  height: 100%;
}

.anticon-close {
  cursor: pointer;
}

.ant-card-title {
  font-weight: bold;
  font-size: 1.2em;
}

.wait-total-title {
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
  color: red;
}

.wait-total-num {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.item-box span:nth-child(1) {
  font-size: 14px;
  margin-bottom: 5px;
}

.item-box span:nth-child(2) {
  font-size: 24px;
  font-weight: bold;
}

.right-box i {
  background-color: #f2f4f7;
  font-size: 1.5em;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 45px;
  text-align: center;
}

.right-box-item .right-box-icon-1 {
  color: #ff394c;
}

.right-box-item .right-box-icon-2 {
  color: #396aff;
}

.right-box-item .right-box-icon-3 {
  color: #39a0ff;
}
</style>
